<template>
  <div class="home_container">
    <home-header :current='current'></home-header>
    <!-- 底部 -->
    <div class="home_hoot">
      <div class="foot_red">
        <div class="foot_red_pozistion">
          <div class="foot_border_down">
            <span></span>
          </div>
        </div>
      </div>
      <!-- 目录按钮 -->
      <div class="catalog_btn"><img src="" alt="" width="25"></div>
      <div class="foot_line">|</div>
      <div class="foot_title">上汽通用五菱SGMW国六排放课程</div>
      <!-- 翻页 -->
      <div class="foot_paging">
        <ul>
            <li><img src="./images/home/prev.png" alt="" width="25" height="25"></li>
            <li>{{this.current}}</li>
            <li>/</li>
            <li>{{this.total}}</li>
            <li v-on:click="NextPage"><img src="./images/home/next.png" alt="" width="25" height="25"></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import HomeHeader from './components/Header'
export default {
    name: "Home",
    components: {
        HomeHeader: HomeHeader
    },
    data () {
        return {
        // 总页数
          total: Number,
        //  当前页数
          current: 1,
          ispage:true,
          content : [
            {

            },
            // 第一页
            {
                "isPaging": true
            },
            // 第二页
            {
                "isPaging": true
            },
            // 第三页
            {
                "isPaging": true
            },
            // 第四页
            {
                "isPaging": true
            },
            // 第五页
            {
                "isPaging": true
            },
            // 第六页
            {
                "isPaging": true
            },
            // 第七页
            {
                "isPaging": true
            },
            // 第八页
            {
                "isPaging": true
            },
            // 第九页
            {
                "isPaging": true
            },
            // 第十页
            {
                "isPaging": true
            },
          ]
        }
    },
    methods: {
    // 下一页
    NextPage () {
      if(this.ispage){
        if(this.current < this.total){
          this.current++
        }
      }
    }
    },
    mounted () {
      this.total = this.content.length-1
    }
}
</script>
<style lang="stylus" scoped>
  .home_container
    position relative
    width: 1024px
    height: 580px
    border: 1px solid #000
    margin: 0 auto
    overflow hidden
    .home_hoot
      position absolute
      width: 100%
      left: 0
      bottom: 0
      height: 50px
      background-color: #666
      box-shadow: 5x 5x 5x #eee
      .foot_red
        position: absolute
        width: 40%
        height:50px
        background: #b70c38
        z-index: 1
        .foot_red_pozistion
          position: absolute
          top: 0
          right: -50px
          .foot_border_down
            width: 0
            height: 0
            border-width: 48px 48px 0
            border-style: solid;
            border-color: #b70c38 transparent transparent
            position: relative
            span
              display: block
              width: 0
              height: 0
              border-width: 48px 48px 0
              border-style: solid
              border-color: #b70c38 transparent transparent
              position: absolute
              top: -48px
              left: -48px
      .catalog_btn
         position: absolute
         left: 2%
         font-size: 20px
         z-index: 2
         img
           margin-top: 12px
           cursor pointer
      .foot_line
        position: absolute
        left: 7%
        font-size: 20px
        color: #fff
        margin-top: 12px
        z-index: 2
      .foot_title
        position: absolute
        left: 10%
        font-size: 20px
        color: #fff
        line-height: 50px
        z-index: 2
      .foot_paging
        float: right
        margin-right: 30px
        ul
          height: 25px
          line-height: 25px;
          margin-top: 12px;
          font-size: 14px;
          li
            float: left
            width: 25px;
            font-size: 16px;
            color: #fff;
            text-align: center
        
</style>